<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo18_2-axios使用get请求参数</title>
  <script src="./js/vue.min.js"></script>
  <script src="./js/vue-router.js"></script>
  <script src="./js/axios.min.js"></script>
</head>

<body>

   <div id="app">
      <h1>网站列表</h1>
     <div v-for=" site in info">
       {{site.name}}
     </div>
   </div>

</body>

<script type="application/javascript">
  new Vue({
    el: "#app",
    data(){
      return {
        info: null
      }
    }
  });
  //get请求参数
  //第一种
     axios
       .get('/user?ID=12345')
       .then(res => (console.log(res)))
       .catch(function (error) {
         console.log('报错信息' + error)
       });
   //第二种
  axios.get('/user',{
    param: {
      ID: 12345
    }
  }).then(res =>console.log(res))
    .catch(err => console.log(err));

   //post请求
  axios.post('/user')
    .then(res=>(this.info = res))
    .catch(err => console.log(err))
  //post请求传参
  axios.post('/user',{
    firstName: 'fred',
    lastName: 'tom'
  }).then(res => console.log(res))
    .catch(err => console.log(err));
  //执行多个请求
  function getUserAccount() {
    return axios.get('/user/12345');
  }
  function getUserPermissions() {
    return axios.get('/user/12345/permission')
  }

  axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function (acct,perms) {
    //两个请求执行完成
  }))
</script>
</html>
